<template>
  <div
    class="app-container"
    v-loading="loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
  >
    <el-descriptions title="单据信息" :column="1" class="out-border">
      <template slot="extra">
        <el-tag
          :type="
            info && info.auditResultCode == 'AUDITING'
              ? 'warning'
              : info.auditResultCode == 'REFUSE'
              ? 'danger'
              : 'success'
          "
          size="large"
          >{{ info && info.auditResultCode | filterAuditResultCode }}</el-tag
        >
      </template>
      <el-descriptions-item>
        <template slot="label">申请单id</template>
        {{ auditId }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">申请时间</template>
        {{ info && info.createTime }}
      </el-descriptions-item>
      <el-descriptions-item v-if="info && info.auditResultCode != 'AUDITING'">
        <template slot="label">{{ `审核${1 ? "通过" : "拒绝"}时间` }}</template>
        {{ info && info.auditTime }}
      </el-descriptions-item>
      <el-descriptions-item v-if="info.auditResultCode == 'REFUSE'">
        <template slot="label">拒绝原因</template>
        {{ info && info.auditResultMessage }}
      </el-descriptions-item>
    </el-descriptions>
    <br />
    <el-descriptions title="个人资料" :column="1" class="out-border">
      <el-descriptions-item>
        <template slot="label">姓名</template>
        {{ info && info.workerName }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">手机号</template>
        {{ info && info.userPhoneNumber }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">身份证号</template>
        {{ info && info.identityCardNumber }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">银行卡号</template>
        {{ info && info.bankCardNumber }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">身份证正反面照片</template>
        <el-row>
          <el-image
            class="image"
            :src="info.identityCardFront"
            :preview-src-list="[info.identityCardFront, info.identityCardBack]"
          >
          </el-image>
          <el-image
            class="image"
            :src="info.identityCardBack"
            :preview-src-list="[info.identityCardBack, info.identityCardFront]"
          >
          </el-image>
        </el-row>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">学习证明资料/相关经验证明资料</template>
        <el-row v-if="info&&info.information"> 
          <el-image
            class="image"
            v-for="(item, index) in info.information.split(',')"
            :key="index"
            :src="item"
            :preview-src-list="[info.information.split(',')]"
          >
          </el-image>
        </el-row>
      </el-descriptions-item>
    </el-descriptions>
    <br />
    <el-descriptions title="服务信息" :column="1" class="out-border">
      <el-descriptions-item>
        <template slot="label">是否有实体店</template>
        {{ info && info.storesFlag | filterStoresFlag }}
      </el-descriptions-item>
      <el-descriptions-item v-if="info.storesFlag==='YES'">
        <template slot="label">门头照片</template>
        <el-row>
          <el-image
            class="image"
            v-for="(item, index) in info.storesImageUrl.split(',')"
            :key="index"
            :src="item"
            :preview-src-list="[info.storesImageUrl.split(',')]"
          >
          </el-image>
        </el-row>
      </el-descriptions-item>
      <el-descriptions-item  v-if="info.storesFlag==='YES'">
        <template slot="label">所在地址</template>
        <div>
          <el-row>{{ info && info.address }}</el-row>
          <br />
          <el-row>
            <Map
            class="mt20"
            v-if="info"
            :lng="info.addressLongitude"
            :lat="info.addressLatitude"
          />
          </el-row>
        </div>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">重点服务区域</template>
        <div v-for="item in info.importTant" :key="item.id">
          {{ item.serviceAreaName }}
        </div>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">优先服务区域</template>
        <div>
          <div v-for="item in info.precedence" :key="item.id">
            {{ item.serviceAreaName }}
          </div>
        </div>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">普通服务区域</template>
        <div>
          <div v-for="item in info.ordinary" :key="item.id">
            {{ item.serviceAreaName }}
          </div>
        </div>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">服务类目</template>
        <div v-if="info && info.category">
          <el-tag
            style="margin: 0 10px 10px 0"
            v-for="item in info.category"
            :key="item.categoryId"
            >{{ item.categoryName }}</el-tag
          >
        </div>
      </el-descriptions-item>
    </el-descriptions>
    <br />

    <el-descriptions title="其他" :column="1" class="out-border">
      <el-descriptions-item>
        <template slot="label">师傅归属</template>
        <div>{{info&&info.saasId}}服务商师傅</div>
      </el-descriptions-item>
    </el-descriptions>
    <div style="text-align: center; margin-top: 10px">
      <el-button type="info" @click="handleClose">关 闭</el-button>
    </div>
  </div>
</template>

<script>
import { apiAuditDetail, apiAuditResult } from "@/api/worker.js";
import Map from "@/components/Map/index.vue";
export default {
  components: { Map },
  data() {
    return {
      auditId: "",
      loading: false,
      mode: "view",
      info: {
        storesImageUrl: "",
        information: "",
        importTant: [],
        precedence: [],
        ordinary: [],
      },
    };
  },
  mounted() {
    try {
      const { auditId, mode } = this.$route.query;
      this.auditId = auditId;
      this.mode = mode;
      this.getData();
    } catch (error) {
      this.$message("丢失主键");
    }
  },
  methods: {
    getData() {
      showLoading();
      apiAuditDetail({ auditId: this.auditId })
        .then((res) => {
          this.info = res.data;
          closeLoading();
        })
        .catch((err) => {
          closeLoading();
        });
    },
    handleClose() {
      this.$router.back();
    },
    handlePass() {
      this.loading = true;
      apiAuditResult({ auditResultCode: "PASS", auditId: this.auditId })
        .then((res) => {
          this.$message({
            type: "success",
            message: "操作成功",
          });
          this.$router.back();
        })
        .catch((err) => {
          this.loading = false;
        });
    },
    handleRefuse() {
      this.$prompt("请填写拒绝原因", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(({ value }) => {
          this.loading = true;
          apiAuditResult({
            auditResultCode: "REFUSE",
            auditId: this.auditId,
            auditResultMessage: value,
          })
            .then((res) => {
              this.$message({
                type: "success",
                message: "操作成功",
              });
              this.$router.back();
              this.loading = false;
            })
            .catch((err) => {
              this.loading = false;
            });
        })
        .catch(() => {});
    },
  },
};
</script>
<style scoped lang="scss">
::v-deep .image {
  width: 120px;
  height: 120px;
  margin-right: 10px;
}
</style>
